<script>
export default {
  created() {
    this.user_list()
  },
  data() {
    return {
      tableData: [],
      doig_data:{},
      input: '',
      page_total: 0,
      centerDialogVisible: false
    }
  },
  methods: {
    async user_list() {
      this.clear_array()
      const { data: res } = await this.$http.get('/flower-user/list')
      this.is_for(res)
    },
    async btn_statu(data, row) {
      row.userStatus = data === 1 ? 2 : 1
      const { data: res } = await this.$http.get(
        '/flower-user/able?userId=' +
          row.userId +
          '&status_btn=' +
          row.userStatus
      )
      this.$message.success(res.msg)
    },
    clear_array() {
      this.tableData.splice(0, this.tableData.length) // 清空数组方法
    },
    async search() {
      const { data: res } = await this.$http.get(
        '/flower-user/search?user_name=' + this.input
      )
      this.is_for(res)
    },
    async changePageCurrent(page) {
      const { data: res } = await this.$http.get(
        '/flower-user/page?current_page=' + page
      )
      this.is_for(res)
    },
    is_for(res) {
      this.clear_array() // 清空数组
      this.page_total = res.data.length
      for (var i = 0; i <= res.data.length - 1; i++) {
        this.tableData.push(res.data[i])
      }
    },
    query_user(row) {
      this.centerDialogVisible = true
      this.doig_data = row;
      if(this.doig_data.userSex === '男'){
        this.doig_data.userSex = '1'
      }else {
        this.doig_data.userSex = '2'
      }
    },
    async clear_user() {
      this.centerDialogVisible = false
      if(this.doig_data.userSex === '1'){
        this.doig_data.userSex = '男'
      }else {
        this.doig_data.userSex = '女'
      }
      const {data : res} = await this.$http.put("/flower-user/update_save",this.doig_data)
      this.$message.success(res.data)
    }
  },
}
</script>
<template>
  <div class="app">
    <div class="header">
      <h1>用户信息</h1>
      <el-input
        placeholder="请输入用户名"
        class="input_sc"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="search()"
        >搜索</el-button
      >
    </div>
    <hr />
    <!--分割线 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="startTime" label="注册日期" width="200">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="100">
      </el-table-column>
      <el-table-column prop="userSex" label="性别" width="80">
      </el-table-column>
      <el-table-column prop="userStatus" label="用户状态" width="80">
      </el-table-column>
      <el-table-column prop="endTime" label="最后登录时间" width="200">
      </el-table-column>
      <el-table-column prop="userAddress" label="收货地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="btn_statu(1, scope.row)"
            v-if="scope.row.userStatus === 1"
            round
            >禁用用户</el-button
          >
          <el-button
            type="success"
            @click="btn_statu(2, scope.row)"
            v-else
            round
            >启用用户</el-button
          >
          <el-button type="success" @click="query_user(scope.row)" round
            >查看信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changePageCurrent"
      :page-size="8"
      :total="page_total"
    >
    </el-pagination>

    <!-- 查看用户信息 -->
    <el-dialog
      title="用户信息"
      :visible.sync="centerDialogVisible"
      :modal="false"
      width="35%"
      center
    >
    <table>
        <tr>
        <td>id:</td>
        <td><el-input v-model="doig_data.userId" disabled></el-input></td>
        <td>账号:</td>
        <td><el-input v-model="doig_data.userAccount" disabled></el-input></td>
      </tr>
      <tr>
        <td>密码:</td>
        <td><el-input v-model="doig_data.userPassword"></el-input></td>
        <td>手机号:</td>
        <td><el-input v-model="doig_data.userPhone" disabled></el-input></td>
      </tr>
      <tr>
        <td>昵称:</td>
        <td><el-input v-model="doig_data.userName"></el-input></td>
        <td>收货地址:</td>
        <td><el-input v-model="doig_data.userAddress"></el-input></td>
      </tr>
      <tr>
        <td>年龄:</td>
        <td><el-input v-model="doig_data.userAge"></el-input></td>
        <td>注册时间:</td>
        <td><el-input v-model="doig_data.startTime"></el-input></td>
      </tr>
      <tr>
        <td>最后操作时间:</td>
        <td><el-input v-model="doig_data.endTime"></el-input></td>
        <td>性别:</td>
        <td>
          <el-radio v-model="doig_data.userSex" label="1">男</el-radio>
          <el-radio v-model="doig_data.userSex" label="2">女</el-radio>
        </td>
      </tr>
    </table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clear_user()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<style lang="less" scoped>
.app {
  .header {
    position: relative;
    padding-bottom: 15px;
    padding-top: 25px;
    h1 {
      position: absolute;
      top: 5px;
      left: 20px;
      font-size: 25px;
    }
    .input_sc {
      width: 300px;
    }
  }
}
</style>
